import React from 'react';
import {Button, Paper, TextField, Tooltip, Typography} from "@material-ui/core";
import {makeStyles} from "@material-ui/styles";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  paper: {
    padding: theme.spacing(4),
  },
  marginBottom: {
    marginBottom: theme.spacing(1),
  },
  marginTop: {
    margin: theme.spacing(3, 0, 0, 0),
  }
}));


export default function UserDetails() {
  const classes = useStyles();
  return (
    <Paper className={classes.paper} elevation={10}>
      <Grid container>
        <Grid item xs={12} className={classes.marginBottom}>
          <Typography variant='h6'> Change Password </Typography>
        </Grid>
        <Grid container className={classes.marginBottom}>
          <Grid item xs={6} style={{paddingRight: "8px"}}>
            <TextField id="password" name="password" label="New password" fullWidth/>
          </Grid>
          <Grid item xs={6} style={{paddingLeft: "8px"}}>
            <TextField id="confirmPassword" name="confirmPassword" label="Confirm password" fullWidth/>
          </Grid>
        </Grid>
        <Grid container justify="flex-end" className={classes.marginTop}>
          <Tooltip arrow title={<Typography>Function not available yet!</Typography>}>
            <span><Button disabled variant='contained' color="primary"> Confirm change </Button></span>
          </Tooltip>
        </Grid>
      </Grid>
    </Paper>
  )
}